<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments::head(~{::title})">
    <title>标签</title>
</head>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="../static/js/semantic.min.js" th:src="@{/js/semantic.min.js}"></script>
<body>
<!--导航 -->
<nav th:replace="_fragments::menu(3)">
</nav>
<!-- 中间内容 -->
<div class="mine-container mine-padded-tb-large">
    <div class="ui container">

        <div class="ui top attached segment">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <h3 class="ui teal header">标签</h3>
                </div>
                <div class="right aligned column">
                    共<h2 class="ui orange header mine-inline-block" th:text="${page.total}">10</h2>篇笔记
                </div>
            </div>
        </div>
        <div class="ui attached bottom segment">
            <a href="#" th:each="tag : ${tags}" th:href="@{/tags/(tagId=${tag.id})}"
               class="ui large teal basic left pointing label mine-margin-tb-tiny">
                <span th:text="${tag.name}" th:classappend="${page.queryDto.tagId}==${tag.id}?mine-black">方法论</span>
                <div class="detail" th:text="${tag.count}"
                     th:classappend="${page.queryDto.tagId}==${tag.id}?mine-black">6
                </div>
            </a>
        </div>

        <div class="ui top attached teal segment">
            <div class="ui padded vertical segment" th:each="blog : ${page.content}">
                <div class="ui mobile reversed stackable grid">
                    <div class="eleven wide column">
                        <h3 class="ui header"><a href="#" th:href="@{/blog/detail(id=${blog.id})}" class="mine-black"
                                                 th:text="${blog.title}">什么事情是你当了老板才知道的？</a></h3>
                        <p th:text="|${blog.desc}......|">
                            当了老板之后，我发现，技术人员，包括曾经的我在内，经常会犯的三个错误，而且是致命的三个错误，用小时候学的几个成语来概括，分别是
                            瞎子摸象，刻舟求剑，以及叶公好龙
                        </p>

                        <div class="ui stackable grid">
                            <div class="eleven wide column">
                                <div class="ui horizontal link list">
                                    <div class="item">
                                        <img th:src="@{${blog.avatar}}" src="#" alt="" class="ui avatar image">
                                        <div class="content"><a href="#" class="header"><span
                                                th:text="${blog.username}">李晓坤</span></a></div>
                                    </div>
                                    <div class="item">
                                        <i class="calendar icon"></i><span
                                            th:text="${#dates.format(blog.createTime,'yyyy-MM-dd')}">2020-06-09</span>
                                    </div>
                                    <div class="item">
                                        <i class="eye icon"></i><span th:text="${blog.viewCount}">1000000</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right aligned five wide column">
                                <a href="#" class="ui teal label mine-padded-tiny mine-text-thin"><span
                                        th:text="${blog.typeName}">认知升级</span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="column">
                                <a href="#" th:each="tag : ${blog.tags}"
                                   class="ui basic teal left pointing label mine-padded-mini mine-text-thin"><span
                                        th:text="${tag.name}">方法论</span></a>
                            </div>
                        </div>
                    </div>

                    <div class="five wide column">
                        <a href="#" target="_blank">
                            <img src="#" th:src="@{${blog.firstPicInfo}}" alt="" class="ui rounded image">
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui attached bottom segment" th:if="${page.total}>0">
            <div class="ui middle aligned two column grid">
                <div class="column">
                    <a th:href="@{/tags/(tagId=${page.queryDto.tagId},number=${page.number}-1)}" class="item"
                       th:classappend="!${page.pre} ? mine-href-hide">上一页</a>
                </div>
                <div class="right aligned column">
                    <a th:href="@{/tags/(tagId=${page.queryDto.tagId},number=${page.number}+1)}" class="item"
                       th:classappend="!${page.next} ? mine-href-hide">下一页</a>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- 底部 -->
<footer th:replace="_fragments::footer">
</footer>
</body>
</html>